<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>展示商品</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            border: none;
        }
        .box{
            width: 500px;
            margin:100px auto;
            border:1px solid #ccc;

        }
        .box li{
            width:150px;
            height:30px;
            line-height: 30px;
            float: left;

            margin:5px;

        }
        .box ul{
            overflow: hidden;
        }
        p{
            width:120px;
            height: 30px;
            border:1px solid #ccc;
            margin:0 auto;
        }
    </style>
</head>
<body>
<div class="box">
    <ul>
        <li>佳能</li>
        <li>索尼</li>
        <li>三星</li>
        <li>尼康</li>
        <li>松下</li>
        <li>卡西欧</li>
        <li>富士</li>
        <li>可达</li>
        <li>宾得</li>
        <li>理光</li>
        <li>奥林巴斯</li>
        <li>明基</li>
        <li>显示其它品牌</li>
    </ul>
    <p>显示所有内容</p>
</div>

<script src="jquery-3.1.1.js"></script>
<script>
    $(function () {
        /*1.让中间的li隐藏
        * 如果使用筛选选择器,如果多次使用,那么
        * 第二个会从初始位置算起,就是会从上一筛选位置作为0*/
//        $('li:gt(2):lt(9)').hide();
        $('li:gt(2):not(:last)').hide();

        /*2.点击p切换动画*/
        $('p').click(function () {
            $('li:gt(2):not(:last)').stop().slideToggle();
            /*2.1设置p的文字,判断*/
            if($(this).text() =='显示所有内容'){
                $(this).text('隐藏所有内容')
            }else {
                $(this).text('显示所有内容');
            }
        })
    })
</script>
</body>
</html>